<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_条件渲染</title>
</head>
<body>
<!--
1. 条件渲染指令
 v-if
 v-else  前端页面加载直接不显示 多次切换可能比较耗时一点点差别大不
 v-show  前端页面加载中添加display：none
2.比较v-if与v-show
  如果需要频繁切换 v-show 较好
-->
<div id="demo">
    <p v-if="istrue">成功了</p>
    <p v-else="">失败了</p>

    <p v-show="istrue">成功</p>
    <p v-show="!istrue">失败</p>

    <button @click="istrue=!istrue">切换</button>
</div>


</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el:'#demo',
        data:{
            istrue:false
        }
    })


</script>


</html>